<template>
  <div class='productTree'>

    <div align="right">
      <el-button
        size="small"
        class="submit"
        @click="addType">新增类别</el-button>
      <el-button
        size="small"
        class="submit"
        @click="deletebut">删除</el-button>
    </div>

    <el-input
      style="margin-bottom: 15px;"
      placeholder="输入关键字进行过滤"
      v-model="filterText"
    />

    <el-tree
      class="filter-tree"
      @node-click="handleNodeClick"
      :data="treeData"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      @node-drop="handleDrop"
      draggable
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      ref="tree"
    />

    <!-- dialog -->

    <el-dialog
      title="新增类别"
      :visible.sync="addTypedialogVisible"
      width="30%">
      <el-form
        :model="typeRuleForm"
        status-icon
        :rules="typeRules"
        ref="typeForm"
        label-width="100px"
        class="demo-ruleForm">
        <el-form-item
          label="类别名称"
          prop="typeName">
          <el-input v-model="typeRuleForm.typeName"/>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer">
        <el-button @click="addTypedialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="submitAddType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { setTimeout } from 'timers'
export default {
  name: 'ProductTree',
  components: {

  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  props: {
    treeData: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      filterText: '',
      timer: void (0),
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      addTypedialogVisible: false,
      typeRuleForm: {
        typeName: ''
      },
      typeRules: {
        typeName: [
          { required: true, message: '请输入类别名称', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        authUse: [
          { required: true, message: '请选择授权使用', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {

    // 新增类别
    addType () {
      this.addTypedialogVisible = true
    },

    // 删除类别
    deletebut () {
      this.$confirm('确定删除选中的类目吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 当前选中的节点
    handleNodeClick (data) {
      console.log('当前选中的类目', data)
      this.$emit('handleNodedata', data)
    },

    filterNode (value, data) {
      console.log('filterNode..', value, data)
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleDrop (draggingNode, dropNode, dropType, ev) {
      clearTimeout(this.timer)
      console.log(dropNode)
      // console.log('tree drop: ', dropNode.label, dropType)
    },
    allowDrop (draggingNode, dropNode, type) {
      if (draggingNode.level === dropNode.level) {
        if (draggingNode.parent.id === dropNode.parent.id) {
          return type === 'prev'
        }
      } else {
        this.timer = setTimeout(() => {
          this.$message.error('抱歉,只能支持同级拖拽!')
        }, 40000)
      }
    },
    allowDrag (draggingNode) {
      return true
    },
    submitAddType () {
      this.$refs['typeForm'].validate((valid) => {
        if (valid) {
          //
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}

</script>

<style lang="less">
@import '../../assets/var.less';

.productTree .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: @themeBlue;
  border-color: @themeBlue;
}

</style>

<style lang="less" scoped>
@import '../../assets/var.less';

.submit {
  background: @themeBlue;
  border: 0;
  color: #fff;
  margin-bottom: 15px;
  margin-left: 0;
  border-radius: 0%;
}
</style>
